<%@ include file="/common/taglibs.jsp"%>


<head>
    <title><fmt:message key="play.title"/></title>
    <meta name="heading" content="<fmt:message key='play.heading'/>"/>
    <meta name="menu" content="AdminMenu"/>
    <link rel="stylesheet" type="text/css" media="all" href="/styles/calendar-aqua/theme.css" /> 
    <link type="text/css" href="/styles/jquery/smoothness/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" href="/styles/jquery/calendar.css" rel="stylesheet" />

       <link type="text/css" href="/styles/dialog.css" rel="stylesheet" />
	<script type="text/javascript" src="/scripts/jquery/lib/jquery.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery/lib/jquery-ui-custom.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery/lib/jquery.field.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery/lib/jquery.validate.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery/lib/date.js"></script>

	
	<script type="text/javascript" src="/scripts/jquery/json.js"></script>
</head>
<body>
<c:set var="buttons">
    <input type="button" style="margin-right: 5px" onclick="played();" value="<fmt:message key="button.PlayedAGame"/>"/>

    
</c:set>test


<c:set var="tempList" value="${list}"/>

<c:out value="${buttons}" escapeXml="false" />

<display:table name="list" cellspacing="0" cellpadding="0" requestURI="" 
    defaultsort="1" id="list" pagesize="25" class="table" export="true">
    <display:column property="currentPlace" escapeXml="true" sortable="true" titleKey="contestant.currentPlace" style="width: 25%"/>
    <display:column property="name" escapeXml="true" sortable="true" titleKey="activeUsers.fullName" style="width: 34%"/>
   
    <display:setProperty name="paging.banner.item_name" value="contestant"/>
    <display:setProperty name="paging.banner.items_name" value="contestants"/>

    <display:setProperty name="export.excel.filename" value="Contestant List.xls"/>
    <display:setProperty name="export.csv.filename" value="Contestant List.csv"/>
    <display:setProperty name="export.pdf.filename" value="Contestant List.pdf"/>
</display:table>

<c:out value="${buttons}" escapeXml="false" />

<script type="text/javascript">
    highlightTableRows("list");
</script>
<div id="dialog" title="Game Played">
	<form name="playGame" id="playGame" method="get" action="">
		<fieldset style="text-align: left">
			<label for="DateOfPlay">Date Of Play:</label>
			<input type="text" name="dateOfPlay" id="dateOfPlay" class="required date text ui-widget-content ui-corner-all calendar" />
			<input type="hidden" id="dateOfPlayValue" name="dateOfPlayValue" />

			<!-- <label for="you">You:</label>
			
			<select name="you" id="you" class="required select ui-widget-content ui-corner-all">
				<c:forEach items="${tempList}" var="x">
					<option value="${x.id}">${x.name}</option>
				</c:forEach>
			</select> -->
	
			<label for="contestant">Contestant:</label>
			
			<select name="contestant" id="contestant" class="required select ui-widget-content ui-corner-all">
				<c:forEach items="${tempList}" var="x">
					<c:if test="${x.id != yourId}">
						<option value="${x.id}">${x.name}</option>
					</c:if>
					
				</c:forEach>
			</select>
	
			<label for="yourScore">You scored(games):</label>
			<select name="yourScore" id="yourScore" class="required select ui-widget-content ui-corner-all">
				<c:forEach begin="0" end="10" var="x">
					<option value="${x}">${x}</option>
				</c:forEach>
			</select>
		
			<label for="contestantScore">Contestant scored(games):</label>

			<select name="contestantScore" id="contestantScore" class="required select ui-widget-content ui-corner-all">
				<c:forEach begin="0" end="10" var="x">
					<option value="${x}">${x}</option>
				</c:forEach>
			</select>
			
			<label for="affect">Affect Ranking?:</label>
			<input type="checkbox" name="affect" id="affect">
		
		</fieldset>
	</form>
</div>
<script language="javascript" type="text/javascript">
	var datepickerDefaults = {
		dateFormat: 'MM d, yy',
		showOn: 'button',
		buttonImage: '/images/iconCalendar.gif',
		buttonImageOnly: true,
		altFormat: 'yy-mm-dd',
		beforeShowDay: $.datepicker.noWeekends
	};
	$.datepicker.setDefaults(datepickerDefaults); // Set settings for all datepicker instances.
	//$("#dialog").hide();

	$('#dateOfPlay').attr('disabled', 'disabled');
	
	$("#dateOfPlay").datepicker({altField: '#dateOfPlayValue'});

	$("#ui-datepicker-div").addClass("promoteZ");
	
	function challenge(contestantId){
	
	}
	function played(){
	
		var allFields = $([]).add($("#you")).add($("#contestant")).add($("#yourScore")).add($("#contestantScore"));
		allFields.val('').removeClass('ui-state-error');
		$("#dialog").dialog({
		bgiframe: true,
		height: 350,
		modal: true,
		buttons: {
			'Save': function(game) {
			//alert($("#you").val());
				//alert($("#affect").val());
				contentType:"application/json; charset=utf-8",
				$.post("/content/play.json",
				{
					you: $("#you").val(),
					contestant: $("#contestant").val(),
					yourScore: $("#yourScore").val(),
					contestantScore: $("#contestantScore").val(),
					affect: $("#affect").val(),
					dateOfPlay: $("#dateOfPlayValue").val()
				},
				function(result){
					
					reload();
				});
			
			},
			'Cancel': function() {
				allFields.val('').removeClass('ui-state-error');
				$(this).dialog('destroy');
			}
		},
		'close': function() {
			allFields.val('').removeClass('ui-state-error');
		}
	});
	$('#dialog').dialog('open');
	}

	function reload(){
		var sURL = unescape(window.location.pathname);	
		window.location.href = sURL;
	}
	
</script>

</body>
